<template>
    <div>
        <p class="title">{{ name }}已选课程</p>
        <!-- <el-dropdown split-button type="success" class="ml-5">
          按学生学号顺序显示
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-model="ustatuss" @click.native="handbyNomal">正序</el-dropdown-item>
            <el-dropdown-item v-model="ustatuss" @click.native="handbyunNomal">逆序</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
        <!-- </div> -->
        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
            @selection-change="handleSelectionChange">
            <el-table-column prop="cid" label="课程编号">
            </el-table-column>
            <el-table-column prop="term" label="修读学期">
            </el-table-column>
            <el-table-column prop="name" label="课程名">
            </el-table-column>
            <el-table-column prop="teacher" label="授课教师">
            </el-table-column>
            <el-table-column prop="period" label="总学时">
            </el-table-column>
            <el-table-column prop="credit" label="学分">
            </el-table-column>
            <el-table-column prop="location" label="地点">
            </el-table-column>
            <el-table-column prop="week" label="周次">
            </el-table-column>
            <el-table-column prop="section" label="节次">
            </el-table-column>
            <el-table-column prop="attr" label="课程属性">
            </el-table-column>
            <el-table-column prop="capacity" label="课容量">
            </el-table-column>
            <el-table-column prop="score" label="成绩">
            </el-table-column>
            <el-table-column label="处理操作" width="150">
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content">修改学生成绩<br />请注意！仅可以修改一次</div>
                        <el-button @click="showDetail(scope.$index, scope.row)" size="small">修改</el-button>
                    </el-tooltip>
                    <el-button size="small" type="danger" :disabled="disabled" @click="delCourse(scope.row)">退课</el-button>
                    <!-- <el-button size="small" type="primary" @click="handerEdit(scope.row)">编辑</el-button> -->
                </template>
                <!-- <el-table-column label="处理操作">
          <template slot-scope="scope">
            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
              icon-color="red" title="你确定删除吗？" @confirm="del(scope.row.cid)">
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm> -->
                <!-- </template> -->
            </el-table-column>
        </el-table>
        <el-dialog title="课程详情" :visible.sync="dialogFormVisible1" width="50%">
            <el-descriptions style="margin: 20px 10px;" :column="3" border>
                <el-descriptions-item label="课程编号">{{ tableData[chooseIndex].cid }}</el-descriptions-item>
                <el-descriptions-item label="修读学期">{{ tableData[chooseIndex].term }}</el-descriptions-item>
                <el-descriptions-item label="课程名">{{ tableData[chooseIndex].name }}</el-descriptions-item>
                <el-descriptions-item label="授课教师">{{ tableData[chooseIndex].teacher }}</el-descriptions-item>
                <el-descriptions-item label="总学时">{{ tableData[chooseIndex].period }}</el-descriptions-item>
                <el-descriptions-item label="学分">{{ tableData[chooseIndex].credit }}</el-descriptions-item>
                <el-descriptions-item label="地点">{{ tableData[chooseIndex].location }}</el-descriptions-item>
                <el-descriptions-item label="周次">{{ tableData[chooseIndex].week }}</el-descriptions-item>
                <el-descriptions-item label="节次">{{ tableData[chooseIndex].section }}</el-descriptions-item>
                <el-descriptions-item label="课程属性">{{ tableData[chooseIndex].attr }}</el-descriptions-item>
                <el-descriptions-item label="课容量">{{ tableData[chooseIndex].capacity }}</el-descriptions-item>
                <el-descriptions-item label="选课人数">{{ tableData[chooseIndex].selectNum }}</el-descriptions-item>
            </el-descriptions>
            <template>
                <span style="margin-left: 20px;"><span style="color: red;margin-right: 4px;">*</span>修改学生成绩：</span>
                <el-input-number v-model="num" @change="handleChange" :disabled="unModify" :min="0" :max="100"
                    label="修改学生成绩"></el-input-number>
            </template>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="sumbitModify">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const cityOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周天'];
export default {
    name: "comment",
    mounted() {
        if (this.score == 94) { this.disabled = true }
        else this.disabled = false
    },
    data() {
        return {
            name: "王小明",
            chooseIndex: 0,
            flag: 0,
            num: 0,
            unModify: false,
            disabled: false,
            checkboxGroup3: ['周一'],
            cities: cityOptions,
            options: [{
                value: '选项1',
                label: '课程编号'
            }, {
                value: '选项2',
                label: '课程名'
            }, {
                value: '选项3',
                label: '授课教师'
            }, {
                value: '选项4',
                label: '地点'
            }],
            rules: {
                cid: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            searchValue: "",
            tableData: [{
                cid: 'C2222102910',
                term: '2020秋',
                name: '计算机组成原理',
                teacher: '毛爱英',
                period: '32',
                credit: '2.5',
                location: '浮山校区 博知楼250',
                week: '1-8',
                section: '47',
                attr: '必修',
                capacity: '32',
                selectNum: '12',
                score: ''
            },
            {
                cid: 'C2222102910',
                term: '2020秋',
                name: '计算机组成原理',
                teacher: '毛爱英',
                period: '32',
                credit: '2.5',
                location: '浮山校区 博知楼250',
                week: '1-8',
                section: '47',
                attr: '必修',
                capacity: '32',
                selectNum: '12',
                score: '94'
            }],
            period: "",
            credit: "",
            attr: "",
            capacity: "",
            unModify1:false,
            form: {
                cid: 'C2222102910',
                term: '2020秋',
                name: '计算机组成原理',
                teacher: '毛爱英',
                period: '32',
                credit: '2.5',
                location: '浮山校区 博知楼250',
                week: '1-8',
                section: '47',
                attr: '必修',
                capacity: '32',
                selectNum: '12',
            },
            total: 0,
            pageNum: 1,
            pageSize: 5,
            uname: "",
            ptitle: "",
            searchContent: "",
            form: {},
            dialogFormVisible1: false,
            dialogFormVisible: false,
            multipleSelection: [],
        }
    },
    created() {
        this.load();
    },
    methods: {
        handeradd() {
            this.dialogFormVisible = true
            this.flag = 0
            this.form = {}
        },
        handerEdit(row) {
            this.form = row
            this.flag = 1
            this.attr = this.form.attr
            this.dialogFormVisible = true
        },

        load() {
            this.request.get("/comment/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    uname: this.uname,
                    ptitle: this.ptitle,
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.records
                this.total = res.total
            })

        },
        delCourse(row) {
            if (row.score != '') {
                alert("学生成绩已登录，不可退课!");
            }
            else
                alert("sss")
            //写业务逻辑
        },
        sumbitModify(){
            alert("ss")
            this.unModify1=true;
            this.dialogFormVisible1= false
        },
        del(id) {
            this.request.delete("/comment/delete/" + id).then(res => {
                if (res) {
                    this.$message.success("删除成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },
        // 显示课程具体信息
        showDetail(index, row) {

            this.chooseIndex = index;
            this.num = row.score
            if (this.num == ''||this.unModify1) {
                this.unModify = true;
            }
            else {
                this.unModify = false;
            }
            this.dialogFormVisible1 = true;
        },
        delBatch() {
            let cids = this.multipleSelection.map(v => v.cid)
            this.request.post("/comment/del/batch", cids).then(res => {
                if (res) {
                    this.$message.success("批量删除成功")
                    this.load()
                } else {
                    this.$message.error("批量删除失败")
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // console.log(val)
        },
        selectedValueBygender() {
            if (this.attr == "必修") {
                this.form.attr = '必修'
            }
            else
                this.form.attr = '选修'
            console.log(1111);
            console.log(this.form.attr);
        }, handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.load()
        },
    }
}
</script>
<style>
.headerBg {
    background-color: #eee !important;

}

.title {
    font-size: 25px;
    color: #303133;
    margin: 10px;
}
</style>